import React, { Component } from 'react';
import { View, StyleSheet, RefreshControl,Dimensions, Platform, Alert} from 'react-native';
import { Container, Content, Left, Thumbnail, Text, Body, Icon, List, ListItem, Spinner} from 'native-base';
import URL from '../../net/url.js';
import STRING from '../../const_string_zh_CN';
import { NavigationActions } from 'react-navigation';
import interaction from '../../net/interaction.js';
import { connect } from 'react-redux';
const { width, height } = Dimensions.get('window');
const marginTop = Platform.OS === 'ios' ? 20 : 0;
class discovery_interact extends Component {

    static navigationOptions = ({ navigation }) => ({
        title: navigation.state.params.title,
    });
    //js组件的构造函数，js的生命周期
    constructor(props) {
        super(props);
        this.state = {
            content: null,
            InteractionCourseID: null,
        };
    }
    render() {

        if (!this.state.content) {
            return this.renderLoadingView();
        }
        else{
             return (
            <Content refreshControl={<RefreshControl refreshing={false} />} scrollEnabled={true} style={StyleSheet.flatten(styles.Container)}>
                <Container  >
                    {this.renderContent(this.state.content)}
                </Container>
            </Content>
        );
        }
       
    }
    //加载等待的view
    renderLoadingView() {
        return (
            <Container>
                <Content>
                    <Spinner color='green' />
                </Content>
            </Container>
        );
    }
    //将接口数据呈现在list组件上
    renderContent(array) {
         if (array == 'noCourseList_currentTerm') {
            return (
                <ListItem style={StyleSheet.flatten(styles.card_style)}>
                    <Text style={StyleSheet.flatten(styles.text_style)}>当前学期暂无课程</Text>
                </ListItem>    
            )
        }
        const { navigate } = this.props.navigation;
        const { interactionCourse } = this.props;
        return array.map((v, i) => {
            return (
                <List style={StyleSheet.flatten(styles.card_style)} key={i}>
                    <ListItem 
                    onPress={() => Alert.alert('课程:'+v.title, '确定签到?', [
                        { text: '取消' },
                        { text: '确定', onPress: () => { this.studentSignIn(v.moocCourseID); }  }
                    ])}
                    /*onPress={() => { this.onPress(v, navigate, interactionCourse) }}*/
                        style={StyleSheet.flatten(styles.ListItem)}>
                        <Thumbnail square size={20} style={StyleSheet.flatten(styles.courseIcon)} source={require('../../images/course2.png')} />
                        <Body>
                            <Text style={StyleSheet.flatten(styles.text_style)}>{v.title}</Text>
                        </Body>
                        <Thumbnail square size={20} style={StyleSheet.flatten(styles.nextIcon)} source={require('../../images/back.png')} />
                    </ListItem>
                </List>
            );
        })
    }
    //rn的生命周期，初始化的时候会执行
    async componentDidMount() {
        const { login_info } = this.props;
        console.log(login_info);
        console.log(login_info.userName);
        let Interaction = new interaction();
        let CourseList_currentTerm = await Interaction.getCourseList_currentTerm(login_info.userName);
        console.log('CourseList_currentTerm');
        console.log(CourseList_currentTerm);
        if(CourseList_currentTerm==undefined){
             this.setState({ content: 'noCourseList_currentTerm', });
        }
        else{
             this.setState({ content: CourseList_currentTerm,});
        }
       
    }
    // 课程-学生端签到单击事件 
    async studentSignIn(moocCourseID) {
        const { login_info } = this.props;
        let Interaction = new interaction();
        console.log('course_info.courseid')
        console.log(moocCourseID)
        console.log('login_info_role.userName')
        console.log(login_info.userName)
        let studentSignInResult = await Interaction.studentSignIn(moocCourseID,login_info.userName);
        console.log('studentSignInResult'+studentSignInResult)
        if (studentSignInResult == 'SignIn Success') {
            console.log('储相瑞java')
            Alert.alert('温馨提醒:', '签到成功');
        }
        else if(studentSignInResult == 'SignIn has not been opened') {
            Alert.alert('温馨提醒:', '签到未开启');
        }
        else if(studentSignInResult == 'SignIn Again') {
            Alert.alert('温馨提醒:', '不允许重复签到');
        }
        else if(studentSignInResult == 'The Course has not been openedd') {
            Alert.alert('温馨提醒:', '课堂未开启');
        }
        else if(studentSignInResult == 'This Course is not InteractionCourse') {
            Alert.alert('温馨提醒:', '此课程为非交互课程');
        }
    }
}
//组件样式控制
const styles = StyleSheet.create({
    card_style: {
        marginRight: 0,
        marginLeft: 0,
        backgroundColor: 'white',

    },
    courseIcon: {
        width: 40,
        height: 40,
    },
    nextIcon: {
        width: 20,
        height: 20,
        marginRight: 20,
        opacity: 0.7,
    },
    text_style: {
        //fontFamily:'微软雅黑',
        fontSize: 15,
        color: '#353535',
        paddingLeft: 15,
    },
    ListItem: {
        marginRight: 0,
        marginLeft: 0,
        height: 60,
        paddingBottom: 10,
        paddingLeft: 20,
        paddingRight: 20,
        backgroundColor: 'white',
        borderBottomWidth: 0.2,
        borderBottomColor: "#cac0c0",
    },
    Container: {
        marginTop: 15,
        // backgroundColor: 'white',
    },
});
function mapStateToProps(state) {
    return {
        login_info: state.login.login_info
    }
}

function mapDispatchToProps(dispatch) {
    return {
        interactionCourse: (state) => dispatch(state)
    }
}

const DiscoveryInteract = connect(
    mapStateToProps,
    mapDispatchToProps
)(discovery_interact)
export default DiscoveryInteract;